<template>
  <div class="simulationMain">
    <div class="questionWrap"
         v-if="questionList.length"
         :class='{"hide":lastQuestion||showQuestion}'>
      <div class="question">
        <div class="questionNum">
          <p class="p1">第{{index+1}}题</p>
        </div>
        <div class="questionContent">
          <div class="questionTitle">
            {{questionList.length&&questionList[index].question}}
          </div>
          <div class="questionAnswer"
               :data-answer=questionList.length&&questionList[index].answer>
            <div v-for="(value,key) in questionList.length&&answer_list"
                 :key=key>
              <p @click.stop="choise(index,key,questionList[index].id)"
                 :data-key="key"
                 :data-right='questionList[index].activeIndex'
                 :class='{"right":questionList[index].activeIndex*1 == key}'>
                <span>{{options[key]}}</span>
                {{value}}
              </p>
            </div>
          </div>
        </div>
        <!-- 解析 -->
        <!--   v-if="questionList[index].activeIndex>=0"
                     :data-index="questionList[index].activeIndex" -->
        <div class="anaylise">
          <div class="answerTips">
            <!-- <span v-if="item.answer === options[commitKey]"
                          style="color:#00cc76">回答正确</span>
                    <span v-else>回答错误，正确答案为：{{item.answer}}，您选择的答案是：{{options[commitKey]}}</span> -->
          </div>
          <div class="analyseAnswer">
            <p>正确答案：{{questionList[index].answer}}</p>
            <p>所在章节：{{questionList[index].location}} </p>
            <p>知识点： {{questionList[index].point}} </p>
            <p>答案解析：</p>
            <p>{{questionList[index].analysis}}</p>
          </div>
        </div>
      </div>
      <!-- <div class="questionBtn">
        <span class="prev"
              @click.stop="prevQuestion"
              :class='{"disabled": index==0}'
              :disabled='index==0'>上一题</span>

        <span class="next"
              @click.stop="nextQuestion">下一题</span>
      </div> -->
    </div>
    <div v-else
         class="noData">
      <img :src=noDataPng>
    </div>
    <!-- 答题部分 -->
    <div class="markBottom"
         :class='{"hide": lastQuestion}'>
      <!-- <span>
           <button
                :data-id=testpaperId
                open-type="share">
                  分享PK
            </button>
          </span> -->
      <span @click.stop="nextQuestion">下一题</span>
      <span class="next"
            @click.stop="navToIndex">更多练习</span>
    </div>
  </div>
</template>
  <script>
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      index: 0,
      lastQuestion: false,
      showQuestion: false,
      startTimeStamp: 0,
      startSecond: 0,
      startMin: 0,
      startHour: 0,
      timer: null,
      commitAnswer: [],
      examRecord: [],
      commitItem: -1, // 试卷的某一道题
      examPaperId: -1, // 选择考卷的id
      showBottom: false, // 最后一页 隐藏底部工具
      clickAnswer: '',
      showmenuMain: false, // 展示菜单页面
      MultiSelection: [], // 答题选项
      currentIndex: -1,
      commitKey: '',
      count: 0,
      rightTotal: 0,
      totalTime: '',
      rightAnswerArray: [],
      questionList: [],
      options: ['A', 'B', 'C', 'D'],
      user_answer_list: [],
      error_list: [],
      noDataPng: 'https://dati.co-links.com/static/xadmin/images/noData.png',
      testpaperId: -1,
      shareId: '',
      activeIndex: -1
    }
  },
  onShareAppMessage (options) {
    console.log(options.target.dataset.id)
    this.shareId = options.target.dataset.id
    if (options.target.dataset.share) {
      return {
        title: '答题',
        path: '/pages/simulationTest/main?shareid=' + options.target.dataset.id
      }
    }
  },
  computed: {
    ...mapState({
      device: state => state.device,
      examPaper: state => state.examPaper,
      randomRecord: state => state.randomRecord,
      formalRecord: state => state.formalRecord,
      userInfo: state => state.userInfo
    }),
    height () {
      return this.device.height
    },
    showExamOver () {
      if (this.showmenuMain || this.showQuestion) {
        return 'hide'
      } else if (this.lastQuestion) {
        return 'show'
      } else {
        return ''
      }
    },
    answer_list () {
      let that = this
      return that.questionList.length && Object.keys(that.questionList[that.index].answer_list).map(key => that.questionList[that.index].answer_list[key]).sort((a, b) => {
        return a.localeCompare(b)
      })
    }
  },
  methods: {
    ...mapMutations(['setExamPaper', 'setrandomRecord', 'setformalRecord']),
    navToIndex () {
      wx.navigateTo({
        url: '../index/main'
      })
    },
    choise (index, key, id) {
      console.log(index, key, id)
      console.log(this.questionList)
      this.questionList[index].activeIndex = key
      console.log(this.questionList[index].activeIndex)
    },
    nextQuestion () {
      this.index++
    },
    prevQuestion () {
      if (this.index === 0) {
        return false
      } else {
        this.index--
      }
    },
    init () {
      let that = this
      this.userid = this.userInfo.user_id || wx.getStorageSync('user_id')
      this.$http.get('https://dati.co-links.com/exam/get_paper', {
        paperid: that.$mp.query.shareId
      }).then((res) => {
        console.log(res.data.data.questions)
        that.questionList = res.data.data.questions
        for (var i in that.questionList) {
          that.questionList[i].activeIndex = -1
          // that.questionList[i].hide = true
        }
      })
    }
  },
  mounted () {
    this.init()
    this.commitAnswer = []
    this.testpaperId = this.$mp.query.shareId
    console.log('gettestpaperId')
    console.log(this.testpaperId)
    console.log('gettestpaperId')
    this.index = 0
  },
  onUnload () {
    console.log('onUnload')
    clearInterval(this.timer)
  }

}
</script>
 <style lang="stylus">
 .simulationMain {
   height: 100%;
 }

 .question {
   padding: 0 32rpx;
   margin-bottom: 20rpx;
   background: white;

   .questionNum {
     font-size: 30rpx;
     color: #333;
     height: 98rpx;
     line-height: 98rpx;
     border-bottom: 2rpx solid #e6e6e6;

     p {
       display: inline-block;
     }

     .p2 {
       float: right;
       width: 112rpx;

       span {
         display: inline-block;
         width: 112rpx;
         height: 46rpx;
         background: #febd32;
         color: white;
         font-size: 26rpx;
         text-align: center;
         line-height: 46rpx;
         border-radius: 6rpx;
         -webkit-border-radius: 6rpx;
       }
     }
   }

   .questionTitle {
     font-size: 32rpx;
     color: #333333;
     padding: 20rpx 0;
   }
 }

 .questionContent {
   padding-bottom: 30rpx;
 }

 .questionAnswer {
   p {
     font-size: 32rpx;
     color: #666666;
     padding: 18rpx 0;
     padding-left: 30rpx;

     span {
       display: inline-block;
       width: 48rpx;
       height: 48rpx;
       border-radius: 50%;
       margin-right: 30rpx;
       border: 1px solid #a5a5a5;
       text-align: center;
       line-height: 48rpx;
     }

     &.active {
       color: #ef5151;

       span {
         border: 1px solid #ef5151;
         background: #ef5151;
         color: white;
       }
     }

     &.right {
       color: #00cc76;

       span {
         background: #00cc76;
         color: #fff;
         border: 1px solid #00cc76;
       }
     }
   }
 }

 .analyseAnswer {
   padding: 20rpx 22rpx;
   background: #ebebeb;
   font-size: 32rpx;
   color: #333333;
   border-radius: 12rpx;
   -webkit-border-radius: 12rpx;

   p {
     line-height: 60rpx;
   }

   p:last-child {
     font-size: 28rpx;
   }
 }

 .markBottom {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 90rpx;
   border-top: 2rpx solid #e6e6e6;
   background: white;
   text-align: center;

   span {
     display: inline-block;
     width: 210rpx;
     height: 68rpx;
     line-height: 68rpx;
     text-align: center;
     border-radius: 10rpx;
     -webkit-border-radius: 10rpx;
     border: 2rpx solid #00cc76;
     font-size: 28rpx;
     color: #fff;
     background: #00cc76;
     margin-top: 10rpx;
     vertical-align: top;

     button {
       font-size: 28rpx;
       color: white;
       background-color: #00cc76;
     }

     .button-hover {
       background-color: #00cc76;
     }
   }

   .next {
     margin-left: 88rpx;
   }

   p {
     display: inline-block;
     width: 25%;
     height: 100%;
     line-height: 90rpx;
     font-size: 50rpx;
     color: #333;
     text-align: center;

     span {
       display: inline-block;
       font-size: 28rpx;
       margin-left: 10rpx;
       line-height: 90rpx;
       height: 100%;
       vertical-align: top;
     }
   }
 }

 .examOver {
   text-align: center;
   display: none;
 }

 .examBg {
   width: 242rpx;
   height: 224rpx;
   padding-top: 180rpx;
 }

 .tips {
   text-align: center;
   font-size: 32rpx;
   color: #333333;
   padding-top: 50rpx;
 }

 .questionBtn {
   text-align: center;
   position: relative;
   margin-top: 200rpx;

   span, button {
     display: inline-block;
     width: 210rpx;
     height: 68rpx;
     line-height: 68rpx;
     text-align: center;
     border-radius: 10rpx;
     -webkit-border-radius: 10rpx;
     border: 2rpx solid #00cc76;
     font-size: 28rpx;
     color: #00cc76;
   }

   .next {
     background: #00cc76;
     color: white;
     margin-left: 88rpx;
   }

   .disabled {
     background: #ccc;
     color: white;
     border: 2rpx solid #ccc;
   }

   .nextBtn {
     display: none;
   }
 }

 .hide {
   display: none !important;
 }

 .show {
   display: block;
 }

 .questionBtn .show {
   display: inline-block;
 }

 .markBottom .collectActive {
   color: #ef5151;
 }

 .menuMain {
   background: #f7f7f7;
   display: none;
 }

 .menuMain&.showmenuMain {
   display: block;
 }

 .singleSelection, .MultiSelection, .checkSelection {
   padding: 0 32rpx;
   margin-bottom: 20rpx;
   background: white;

   .title {
     padding-top: 20rpx;
     font-size: 32rpx;
     color: #333333;
   }
 }

 .singleList {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
   flex-wrap: wrap;
   padding-bottom: 30rpx;

   span {
     display: inline-block;
     width: 60rpx;
     height: 60rpx;
     border-radius: 50%;
     -webkit-border-radius: 50%;
     color: #666666;
     font-size: 32rpx;
     text-align: center;
     line-height: 60rpx;
     background: #e6e6e6;
     margin: 20rpx;

     &.active {
       background: #00cc76;
       color: white;
     }
   }
 }

 .topicSelect {
   padding-bottom: 100rpx;
 }

 .fixedBtn {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   text-align: center;
   height: 88rpx;
   border-top: 1px solid #e6e6e6;
   background: white;

   span {
     display: inline-block;
     margin-top: 8rpx;
     width: 292rpx;
     height: 72rpx;
     text-align: center;
     line-height: 72rpx;
     color: #ffffff;
     font-size: 28rpx;
     border-radius: 12rpx;
     -webkit-border-radius: 12rpx;
     background: #00cc76;

     &:nth-child(2) {
       margin-left: 38rpx;
     }
   }
 }

 .noData {
   position: fixed;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   z-index: 4;
   background: white;

   img {
     position: absolute;
     display: block;
     width: 300rpx;
     height: 300rpx;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
   }
 }
</style>

